<template>
  <div class="spurs-dialog">
    <el-dialog
      v-model="dialogVisible"
      :append-to-body="true"
      :title="title"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      draggable
    >
      <SpursForm
        ref="spursFormRef"
        v-bind="formConfig"
        :dialogVisible="dialogVisible"
        :modelValue="modelValue"
        :rules="rules"
      ></SpursForm>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="saveSubmit"> 确 定 </el-button>
          <slot name="footer"></slot>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import cloneDeep from "lodash/cloneDeep";
import { ref, watch, reactive } from "vue";
import SpursForm from "@/components/SpursForm/index.vue";
import { formConfig } from "@/components/addEditDialog/customer/FormConfig";
import type { FormInstance, FormRules } from "element-plus";
import customerApi from "@/api/customer";
const spursFormRef = ref();
const rules = reactive<FormRules>({
  nickName: [{ required: true, message: "请输入客户名称", trigger: "blur" }],
  unit: [{ required: true, message: "请输入所属单位", trigger: "blur" }],
  researchGroup: [{ required: true, message: "请输入课题组", trigger: "blur" }],
  phone: [
    { required: true, message: "请输入联系方式", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的手机号",
      trigger: "blur",
    },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 16, message: "长度在 6 到 16 个字符", trigger: "blur" },
    {
      pattern: /^[a-zA-Z0-9+@#$%^&*.,]+$/,
      message: "密码只能包含字母和数字以及特殊字符+-@#$%^&*.,",
      trigger: "blur",
    },
  ],
  bossName: [{ required: true, message: "请输入老师名字", trigger: "blur" }],
});
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      addEditFun();
    }
  });
};
const addEditFun = async () => {
  let res = null;
  if (props.title == "新增") {
    res = await customerApi.addCustomer(modelValue.value);
  } else {
    const id = props.formData.id;
    res = await customerApi.editCustomer(id, modelValue.value);
  }
  emit("saveSubmit", res);
};
let modelValue: any = ref({
  password: "",
  nickName: "",
  unit: "",
  researchGroup: "",
  phone: "",
});
const props = defineProps({
  visible: { type: Boolean, default: false },
  title: { type: String, default: "新增" },
  formData: { type: Object, default: {} },
});
const emit = defineEmits(["update:visible", "saveSubmit"]);
let dialogVisible = ref(props.visible);
watch(
  () => props.visible,
  (newValue) => {
    dialogVisible.value = newValue;
    if (newValue) {
      modelValue.value = cloneDeep(props.formData);
    } else {
      modelValue.value = {};
    }
  }
);
watch(
  () => dialogVisible.value,
  (newValue) => {
    emit("update:visible", newValue);
  }
);
const close = () => {
  spursFormRef.value.ruleFormRef.clearValidate();
  dialogVisible.value = false;
};
const saveSubmit = () => {
  submitForm(spursFormRef.value.ruleFormRef);
};
</script>

<style scoped></style>
